import React, { useEffect, useState } from 'react'
import { NavBar, IndexBar, List } from 'antd-mobile'
import axios from 'axios';
import { connect } from 'umi';

function City(props: any) {
  const { history } = props
  const [list, setList] = useState([])
  useEffect(() => {
    axios({
      method: 'GET',
      url: 'https://m.maizuo.com/gateway?k=725408',
      headers: {
        'X-Client-Info': '{ "a": "3000", "ch": "1002", "v": "5.2.1", "e": "16801628172267442084577281", "bc": "420100" }',
        'X-Host': 'mall.film-ticket.city.list'
      }
    }).then(res => {
      // console.log(res.data.data.cities);
      citierHandle(res.data.data.cities)
    })
  }, [])
  const citierHandle = (cities: any) => {
    const letterList: any = []
    for (var i = 65; i < 91; i++) {
      var midList = cities.filter((val: any) => val.pinyin.substring(0, 1).toUpperCase() === String.fromCharCode(i))
      midList.length && letterList.push({
        title: String.fromCharCode(i),
        items: midList
      })
    }
    console.log(letterList);

    setList(letterList)
  }
  const goback = () => {
    history.go(-1)
  }
  const chooseCity = (items: any) => {
    console.log(items);
    history.push('/cinema')
    //分发方法到models中的reducers
    props.dispatch({
      type: 'city/changeCity',
      payload: {
        cityName: items.name,
        cityId: items.cityId
      }
    })
    //每次切换城市清空影院列表，因为列表显示页是根据列表是否有长度来决定是否使用缓存
    props.dispatch({
      type: 'cinema/clearList',
    })

  }
  return (
    <div>
      <NavBar className='bgc' onBack={goback}>当前城市</NavBar>
      <div style={{ height: window.innerHeight }}>
        <IndexBar>
          {list.map((group: any) => {
            const { title, items } = group
            return (
              <IndexBar.Panel
                index={title}
                title={title}
                key={title}
              >
                <List>
                  {items.map((val: any, index: number) => (
                    <List.Item key={index} onClick={() => { chooseCity(val) }}>{val.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            )
          })}
        </IndexBar>
      </div>
    </div>
  )
}

export default connect(() => ({}))(City)